/*
 * @Author: yukang 18790336164@163.com
 * @Date: 2025-01-26 17:26:16
 * @LastEditors: yukang 18790336164@163.com
 * @LastEditTime: 2025-01-26 18:47:04
 * @FilePath: \html\assets\js\main.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
(function ($) {
  "use strict";

  /*----------------------------------------
	   Sticky Menu Activation
	------------------------------------------*/

  $(window).on("scroll", function () {
    if ($(this).scrollTop() > 50) {
      $(".header-sticky").addClass("sticky");
    } else {
      $(".header-sticky").removeClass("sticky");
    }
  });
  /*-----------------------------------------
		Off Canvas Mobile Menu
	-------------------------------------------*/

  $(".mobile-menu-hamburger").on("click", function () {
    $("body").addClass("fix");
    $(".mobile-menu-wrapper").addClass("open");
  });

  $(".offcanvas-btn-close,.offcanvas-overlay").on("click", function () {
    $("body").removeClass("fix");
    $(".mobile-menu-wrapper").removeClass("open");
  });

  /*----------------------------------------
		Responsive Mobile Menu
	------------------------------------------*/

  //Variables
  var $offCanvasNav = $(".mobile-menu, .category-menu"),
    $offCanvasNavSubMenu = $offCanvasNav.find(".dropdown");

  //Close Off Canvas Sub Menu
  $offCanvasNavSubMenu.slideUp();

  //Category Sub Menu Toggle
  $offCanvasNav.on("click", "li a, li .menu-expand", function (e) {
    var $this = $(this);
    if (
      $this
        .parent()
        .attr("class")
        .match(/\b(menu-item-has-children|has-children|has-sub-menu)\b/) &&
      ($this.attr("href") === "#" || $this.hasClass("menu-expand"))
    ) {
      e.preventDefault();
      if ($this.siblings("ul:visible").length) {
        $this.parent("li").removeClass("active");
        $this.siblings("ul").slideUp();
      } else {
        $this.parent("li").addClass("active");
        $this
          .closest("li")
          .siblings("li")
          .removeClass("active")
          .find("li")
          .removeClass("active");
        $this.closest("li").siblings("li").find("ul:visible").slideUp();
        $this.siblings("ul").slideDown();
      }
    }
  });

  /*----------------------------------------
		Responsive Mobile Menu
	------------------------------------------*/
  /* Hero Slider Activation */
  $(".slider-active").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: false,
    dots: true,
    nextArrow: '<i class="ti-arrow-right slide-arrow-right"></i>',
    prevArrow: '<i class="ti-arrow-left slide-arrow-left"></i>',
  });

  /* Blog Slider Activation */
  var swiper = new Swiper(".blog-slider .swiper-container", {
    slidesPerView: 1,
    spaceBetween: 0,
    loop: true,
    lazyLoading: true,
    TouchSpin: true,
    pagination: true,
    navigation: true,

    /* Navigation arrows */
    navigation: {
      nextEl: ".blog-slider .blog-slider-next",
      prevEl: ".blog-slider .blog-slider-prev",
    },
    pagination: {
      el: ".blog-slider .swiper-pagination",
      type: "bullets",
      clickable: "true",
    },
    /* Responsive breakpoints */
  });

  // Team Carousel
  var swiper = new Swiper(".team-carousel .swiper-container", {
    slidesPerView: 3,
    spaceBetween: 60,
    loop: true,
    lazyLoading: true,
    TouchSpin: true,
    watchSlidesVisibility: true,
    // Navigation arrows
    navigation: {
      nextEl: ".team-carousel .team-slider-next",
      prevEl: ".team-carousel .team-slider-prev",
    },
    pagination: {
      el: ".team-carousel .swiper-pagination",
      type: "bullets",
      clickable: "true",
    },
    // Responsive breakpoints
    breakpoints: {
      // when window width is >= 320px
      320: {
        slidesPerView: 1,
      },
      // when window width is >= 480px
      480: {
        slidesPerView: 1,
        spaceBetween: 30,
      },
      // when window width is >= 576px
      576: {
        slidesPerView: 2,
        spaceBetween: 30,
      },
      // when window width is >= 768px
      768: {
        slidesPerView: 2,
        spaceBetween: 30,
      },
      // when window width is >= 992px
      992: {
        slidesPerView: 3,
        spaceBetween: 60,
      },
      // when window width is >= 1200px
      1200: {
        slidesPerView: 3,
      },
    },
  });

  /*-- Client Crousel --*/
  var productCarousel = new Swiper(".client-crousel .swiper-container", {
    loop: true,
    slidesPerView: 2,
    spaceBetween: 30,

    pagination: {
      el: ".client-crousel .swiper-pagination",
      type: "bullets",
      clickable: "true",
    },

    // Navigation arrows
    navigation: {
      nextEl: ".client-crousel .client-crousel-next",
      prevEl: ".client-crousel .client-crousel-prev",
    },

    // Responsive breakpoints
    breakpoints: {
      // when window width is >= 320px
      320: {
        slidesPerView: 1,
      },
      // when window width is >= 992px
      992: {
        slidesPerView: 2,
      },
    },
  });

  /*-- Brand Logo --*/
  var brandCarousel = new Swiper(".brand-logo-carousel .swiper-container", {
    loop: true,
    speed: 750,
    spaceBetween: 30,
    slidesPerView: 5,
    effect: "slide",
    //autoplay: {},

    // Responsive breakpoints
    breakpoints: {
      // when window width is >= 320px
      320: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
      // when window width is >= 480px
      480: {
        slidesPerView: 3,
        spaceBetween: 30,
      },
      // when window width is >= 768px
      768: {
        slidesPerView: 4,
        spaceBetween: 30,
      },
      // when window width is >= 992px
      992: {
        slidesPerView: 5,
        spaceBetween: 30,
      },
    },
  });

  /*----------------------------------------
		Select Box
	------------------------------------------*/
  if ($(".custom-select-box").length) {
    $(".custom-select-box")
      .selectmenu()
      .selectmenu("menuWidget")
      .addClass("overflow");
  }

  /*-------------------------
        Ajax Contact Form 
    ---------------------------*/
  $(function () {
    // Get the form.
    var form = $("#contact-form");

    // Get the messages div.
    var formMessages = $(".form-messege");

    // Set up an event listener for the contact form.
    $(form).submit(function (e) {
      // Stop the browser from submitting the form.
      e.preventDefault();

      // Serialize the form data.
      var formData = $(form).serialize();

      // Submit the form using AJAX.
      $.ajax({
        type: "POST",
        url: $(form).attr("action"),
        data: formData,
      })
        .done(function (response) {
          // Make sure that the formMessages div has the 'success' class.
          $(formMessages).removeClass("error");
          $(formMessages).addClass("success");

          // Set the message text.
          $(formMessages).text(response);

          // Clear the form.
          $("#contact-form input,#contact-form textarea").val("");
        })
        .fail(function (data) {
          // Make sure that the formMessages div has the 'error' class.
          $(formMessages).removeClass("success");
          $(formMessages).addClass("error");

          // Set the message text.
          if (data.responseText !== "") {
            $(formMessages).text(data.responseText);
          } else {
            $(formMessages).text(
              "Oops! An error occured and your message could not be sent."
            );
          }
        });
    });
  });

  /*----------------------------------------
		Aos Activation Js
	------------------------------------------*/

  AOS.init({
    duration: 1500, // values from 0 to 3000, with step 50ms
    disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
    offset: 0, // offset (in px) from the original trigger point
    once: true,
    easing: "ease",
  });

  /*---------------------------------
        Scroll Up
    -----------------------------------*/
  function scrollToTop() {
    var $scrollUp = $("#scroll-top"),
      $lastScrollTop = 0,
      $window = $(window);

    $window.on("scroll", function () {
      var st = $(this).scrollTop();
      if (st > $lastScrollTop) {
        $scrollUp.removeClass("show");
      } else {
        if ($window.scrollTop() > 200) {
          $scrollUp.addClass("show");
        } else {
          $scrollUp.removeClass("show");
        }
      }
      $lastScrollTop = st;
    });

    $scrollUp.on("click", function (evt) {
      $("html, body").animate({ scrollTop: 0 }, 600);
      evt.preventDefault();
    });
  }
  scrollToTop();

  /*----------------------------------------*/
  /*-----  Preloader
	---------------------------------*/
  $(window).on("load", function () {
    $("#preloader").delay(150).fadeOut("slow");
    $("body").delay(150).css({ overflow: "visible" });
  });
})(window.jQuery);

//----------------------轮播---------------------//
// 动态复制图片节点
const sliderTrack = document.getElementById("sliderTrack");
const originalItems = sliderTrack.innerHTML;
sliderTrack.innerHTML = originalItems + originalItems;

// 动画控制逻辑
let position = 0;
const speed = 0.2; // 像素/帧
const totalWidth = 2440; // 8张图片 + 间隔的总宽度 (300px * 8 + 10px * 7)
let animationId;

function animate() {
  position -= speed;

  // 当移动到复制内容末尾时，无缝跳回初始位置
  if (position <= -totalWidth) {
    position = 0;
  }

  sliderTrack.style.transform = `translateX(${position}px)`;
  animationId = requestAnimationFrame(animate);
}

// 鼠标事件控制
sliderTrack.addEventListener("mouseenter", () => {
  cancelAnimationFrame(animationId);
});

sliderTrack.addEventListener("mouseleave", () => {
  animationId = requestAnimationFrame(animate);
});

// 启动动画
animate();
